<template>
  <div class="tl">
    {{ msg }}
    <button @click="msg = '凹凸曼'">点击修改</button>
  </div>
</template>

<script>
export default {
  beforeCreate() {
    //beforeCreate不能获取数据
    console.log('beforeCreate数据：' + this.msg)
    console.log('beforeCreatedom结构：' + document.querySelector('.tl'))
  },
  created() {
    //created可以获取到数据了
    //不能获取到dom元素
    console.log('created数据：' + this.msg)
    console.log('createddom结构：' + document.querySelector('.tl'))
  },
  beforeMount() {
    //挂载前
    //不能拿到dom
    console.log('beforeMount数据：' + this.msg)
    console.log('beforeMountdom结构：' + document.querySelector('.tl'))
  },
  mounted() {
    //表示挂载完毕
    //可以拿到数据和dom
    console.log('mounted数据：' + this.msg)
    console.log('mounteddom结构：' + document.querySelector('.tl'))
  },
  //组件初始化渲染的时候，执行以上四个生命周期钩子函数
  beforeUpdate() {
    console.log('beforeUpdate数据：' + this.msg)
    console.log('beforeUpdate结构：' + document.querySelector('.tl').innerHTML)
  },
  updated() {
    console.log('updated数据：' + this.msg)
    console.log('updated结构：' + document.querySelector('.tl').innerHTML)
  },
  data() {
    return {
      msg: '泰罗',
    }
  },
}
</script>

<style></style>
